<script setup lang="ts">
import { onMounted, ref } from 'vue'
import NoCertificate from './c-cpns/no-certificate.vue'
import Certificate from './c-cpns/certificate.vue'
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { userInfoData } = storeToRefs(userStore)

const fetchGetUserInfo = () => {
  userStore.fetchGetUserInfoAction()
}
onMounted(() => {
  fetchGetUserInfo()
})
</script>
<template>
  <div class="certification">
    <custom-title-v1 title="实名认证"></custom-title-v1>
    <div
      class="status-bar"
      :class="userInfoData.authStatus == 1 ? 'verify' : ''"
    >
      <template v-if="userInfoData.authStatus == 1">
        <icon-safety></icon-safety>
        <div class="status-text">已认证</div>
      </template>
      <template v-else>
        <icon-safe></icon-safe>
        <div class="status-text">未完成实名认证</div>
      </template>
    </div>
    <div class="certificate-box">
      <certificate
        v-if="userInfoData.authStatus == 1"
        :userInfo="userInfoData"
      ></certificate>
      <no-certificate v-else></no-certificate>
    </div>
  </div>
</template>
<style scoped lang="less">
.certification {
  margin: 0 20px;
  .status-bar {
    margin-top: 20px;
    height: 80px;
    background-color: #f4f9ff;
    font-size: 16px;
    color: #4490f1;
    letter-spacing: 1px;
    font-weight: 700;
    display: flex;
    align-items: center;
    &.verify {
      color: #67c23a;
    }
    .icon {
      color: inherit;
      font-weight: 400;
      font-size: 28px;
      margin: 0 14px 0 20px;
    }
    .status-text {
      margin-left: 10px;
    }
  }
  .certificate-box {
    margin: 20px;
    .form-box {
      width: 60%;
      margin: 0 auto;
    }
  }
}
</style>
